import React from 'react';
import Chart from './components/chart';
import { Button, Card, Col, Divider, Empty, List, Row, Statistic, StatisticProps, Steps, Tag } from 'antd';
import "./index.scss";
import { AntDesignOutlined, GlobalOutlined } from '@ant-design/icons';
import CountUp from 'react-countup';

const formatter: StatisticProps['formatter'] = (value) => (
    <CountUp end={value as number} separator="," />
);

const Workbench: React.FC = () => {
    return (
        <div className='box_container'>
            <Row gutter={[10, 10]}>
                <Col span={16}>
                    <Card>
                        <Chart />
                    </Card>
                    <Card style={{ margin: '10px 0' }}>
                        <div className='grid-card'><Row gutter={[10, 10]}>
                            {
                                [{ title: "活跃用户", num: "123456" },
                                { title: "用户", num: "2345" },
                                { title: "浏览量", num: "4567" },
                                { title: "收藏数", num: "978" }].map((item, index) => {
                                    return <Col span={6} key={index}>
                                        <Card >
                                            <div className='grid-card-content'>
                                                <div className='grid-card-content-icons'>
                                                    <AntDesignOutlined className='grid-card-content-icon' />
                                                </div>
                                                <div>
                                                    <Statistic title={item.title} value={item.num} formatter={formatter} />
                                                </div>
                                            </div>
                                        </Card>
                                    </Col>
                                })
                            }
                        </Row>
                        </div>
                    </Card>

                    <Card title="something">
                        <Empty />
                    </Card>
                </Col>

                <Col span={8}>
                    <Card title="公告" extra={<Button type="link" className='more-btn'>更多</Button>}>
                        <List
                            bordered={false}
                            dataSource={[{ type: "processing", content: "公告内容1", tag: "通知" },
                            { type: "success", content: "公告内容2", tag: "消息" },
                            { type: "warning", content: "公告内容3", tag: "活动" }]}
                            renderItem={(el, index) => <List.Item key={index}><div className='notice-item'>
                                <Tag color={el.type}>{el.tag}</Tag>
                                <div className='notice-item_content'>{el.content}</div>
                            </div></List.Item>}
                        />
                    </Card>

                    <Row gutter={[5, 0]} style={{ margin: '10px 0' }}>
                        {[6999, 76543].map((item, ind) => {
                            return <Col span={12} key={ind}>
                                <Card>
                                    <div className='card_info'>
                                        <div className='card_info_title'>数据{ind + 1}</div>
                                        <div className='card_info_icons'>
                                            <GlobalOutlined className='card_info_icon' />
                                        </div>
                                        <Statistic value={item} formatter={formatter} />
                                    </div>
                                </Card>
                            </Col>
                        })}
                    </Row>

                    <Card title="Steps">
                        <Steps
                            progressDot
                            current={1}
                            direction="vertical"
                            items={[
                                {
                                    title: 'Finished',
                                    description: 'This is a description. This is a description.',
                                },
                                {
                                    title: 'Finished',
                                    description: 'This is a description. This is a description.',
                                },
                                {
                                    title: 'In Progress',
                                    description: 'This is a description. This is a description.',
                                },
                                {
                                    title: 'Waiting',
                                    description: 'This is a description.',
                                },
                                {
                                    title: 'Waiting',
                                    description: 'This is a description.',
                                },
                            ]}
                        />
                    </Card>
                </Col>
            </Row>
        </div >
    )
}

export default Workbench;